<template>
    <div class="wrapper">
        <div class="topWrapper">
            <img class="bg" style="min-height: 150px" src="@/assets/images/bg.png" alt="" />
            <div class="content">
                <div class="top">累计收益 (元)</div>
                <div class="center">
                    <div class="left">
                        ￥
                        <span>{{ addPro }}</span>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left" @click="selectMon">
                        <span>{{ start }}至{{ end }}</span>
                    </div>
                    <div class="btn" @click="getPayType">
                        <span>{{ item.name }}</span>
                        <img src="@/assets/do.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomWrapper">
            <van-tabs v-model:active="active" @click-tab="onClickTab" color="#66d6ff">
                <van-tab title="交易收益"></van-tab>
                <van-tab title="返现收益"></van-tab>
                <van-tab v-if="bountyShow === 'Y'" title="服务收益"></van-tab>
                <!-- <van-tab title="商户奖励"></van-tab> -->
            </van-tabs>
            <div class="cc">
                <empty v-if="!jyList.length"></empty>

                <div class="list" v-show="active !== 1">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="downPage">
                        <div class="item" @click="goDetail(item)" v-for="item in jyList" :key="item.ID">
                            <div class="left">
                                <div class="top">{{ item.payTypeName }}</div>
                                <div class="bottom">{{ item.PROFIT_DATE }}</div>
                            </div>
                            <div class="right">
                                <span style="font-size: 13px">{{ item.PROFIT_AMOUNT }}</span>
                                <img class="img" style="height: 20px; width: 20px" src="@/assets/chevron-down@2x.png" />
                            </div>
                        </div>
                    </van-list>
                </div>

                <div class="list" v-show="active === 1">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="downPage">
                        <div class="item" @click="goDetail(item)" v-for="item in jyList" :key="item.ID">
                            <div class="left">
                                <div class="top">
                                    <span v-if="item.TYPE === 'deductions'">联创扣减</span>
                                    <span v-if="item.TYPE === 'back'">返现收益</span>
                                    <!-- <span v-if="item.TYPE === 'yingkeBack'">盈客返现收益</span> -->
                                </div>
                                <div class="bottom">{{ item.PROFIT_DATE }}</div>
                            </div>
                            <div class="right">
                                <span style="font-size: 13px">{{ item.SHOULD_PAY_BACK || item.AMOUNT }}</span>
                                <img class="img" style="height: 20px; width: 20px" src="@/assets/chevron-down@2x.png" />
                            </div>
                        </div>
                    </van-list>
                </div>
            </div>
        </div>

        <van-action-sheet @select="onSelect" v-model:show="show" :actions="actions" cancel-span="取消" close-on-click-action />
        <van-calendar
            color="#66d6ff"
            :min-date="minDate"
            :max-date="maxDate"
            row-height="50"
            v-model:show="showDay"
            allow-same-day
            type="range"
            @confirm="onConfirm"
            :default-date="[new Date(start), new Date(end)]"
        />
    </div>
</template>

<script>
import { parseTime } from '@/utils/utils.ts'
import { findCostFeeByAgentNo } from '@/api/agent'

import {
    findActivateBackDetailByTime,
    findProActMonthByTime,
    findProfitBountyDetailByTimeAndPayType,
    findProfitDetailByTimeAndPayType,
    findProfitManageDetailByTimeAndPayType,
    payType,
    totalStatisticGroupDay
} from '../../api/agent'
export default {
    name: 'earningDetail',
    data() {
        return {
            active: 0,
            pageNum: 1,
            tabs: 0,
            addPro: 0,
            bountyShow: 'N',
            start: '',
            payWay: '',
            end: '',
            monList: [],
            item: { name: '全部' },
            show: false,
            loading: false,
            finished: false,
            showDay: false,
            list: [],
            mons: [],
            jyList: [],
            actions: [],
            echartsDay: 7,
            minDate: new Date(2022, 9, 1),
            maxDate: new Date(2030, 3, 31)
        }
    },
    mounted() {
        findCostFeeByAgentNo().then(res => {
            this.bountyShow = res.object.bountyShow
        })

        this.start = parseTime(new Date(), '{y}-{m}') + '-01'
        this.end = parseTime(new Date(), '{y}-{m}-{d}')
        this.dayAllProfit()
    },
    methods: {
        goDetail(item) {
            if (this.active !== 1) {
                this.$router.push({
                    path: '/profitDetail',
                    query: {
                        id: item.FLOW_ID
                    }
                })
            } else {
                this.$router.push({
                    path: '/profitDetail',
                    query: {
                        backid: item.ID,
                        type: item.TYPE
                    }
                })
            }
        },
        dayAllProfit() {
            let data = {
                timeStart: this.start,
                timeEnd: this.end,
                payType: this.payWay
            }
            totalStatisticGroupDay(data).then(res => {
                const { code, message, object } = res
                if (code == 200) {
                    this.addPro = object.profitTotal
                } else {
                    this.addPro = '0.00'
                }
            })
        },
        onConfirm(values) {
            this.list = []
            const [start, end] = values
            this.start = parseTime(start, '{y}-{m}-{d}')
            this.end = parseTime(end, '{y}-{m}-{d}')
            // if (this.tabs === 0) this.getFindProfitDetailByTimeAndPayType()
            // if (this.tabs === 1) this.getFindActivateBackDetailByTime()
            // if (this.tabs === 2) this.getFindProfitBountyDetailByTimeAndPayType()
            // if (this.tabs === 3) this.getFindProfitManageDetailByTimeAndPayType()
            if (this.tabs === 0) {
                findProfitDetailByTimeAndPayType({
                    timeStart: this.start,
                    timeEnd: this.end,
                    currentPage: this.pageNum,
                    payType: this.item.payType
                }).then(res => {
                    this.jyList = res.object
                })
            } else if (this.tabs === 1) {
                findActivateBackDetailByTime({
                    timeStart: this.start,
                    timeEnd: this.end,
                    currentPage: this.pageNum,
                    payType: this.item.payType
                }).then(res => {
                    if (res.object.length < 10) {
                        this.loading = false
                        this.finished = true
                    } else {
                        this.pageNum++
                        this.loading = false
                        this.finished = false
                    }
                    this.jyList = res.object
                })
            } else if (this.tabs == 2) {
                findProfitBountyDetailByTimeAndPayType({
                    timeStart: this.start,
                    timeEnd: this.end,
                    currentPage: this.pageNum,
                    payType: this.item.payType
                }).then(res => {
                    this.jyList = res.object
                })
            }
            // else if (this.tabs == 3) {
            //     findProfitManageDetailByTimeAndPayType({
            //         timeStart: this.start,
            //         timeEnd: this.end,
            //         currentPage: this.pageNum,
            //         payType: this.item.payType
            //     }).then(res => {
            //         this.jyList = res.object
            //     })
            // }
            this.$forceUpdate()
            this.showDay = false
        },
        selectMon(e) {
            this.showDay = true
        },
        onSelect(item) {
            this.item = item
            this.onClickTab({ name: this.tabs })
        },

        downPage() {
            if (this.tabs === 0) this.getFindProfitDetailByTimeAndPayType()
            if (this.tabs === 1) this.getFindActivateBackDetailByTime()
            if (this.tabs === 2) this.getFindProfitBountyDetailByTimeAndPayType()
            // if (this.tabs === 3) this.getFindProfitManageDetailByTimeAndPayType()
        },

        onClickTab(e) {
            this.jyList = []
            this.pageNum = 1
            this.tabs = e.name
            if (this.tabs === 0) this.getFindProfitDetailByTimeAndPayType()
            if (this.tabs === 1) this.getFindActivateBackDetailByTime()
            if (this.tabs === 2) this.getFindProfitBountyDetailByTimeAndPayType()
            // if (this.tabs === 3) this.getFindProfitManageDetailByTimeAndPayType()
        },
        // 交易收益
        getFindProfitDetailByTimeAndPayType() {
            findProfitDetailByTimeAndPayType({
                timeStart: this.start,
                timeEnd: this.end,
                currentPage: this.pageNum,
                payType: this.item.payType
            }).then(res => {
                if (res.object.length < 10) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.pageNum++
                    this.loading = false
                    this.finished = false
                }
                this.jyList = this.jyList.concat(res.object)
            })
        },
        //  返现收益
        getFindActivateBackDetailByTime() {
            findActivateBackDetailByTime({
                timeStart: this.start,
                timeEnd: this.end,
                currentPage: this.pageNum,
                payType: this.item.payType
            }).then(res => {
                if (res.object.length < 10) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.pageNum++
                    this.loading = false
                    this.finished = false
                }
                this.jyList = this.jyList.concat(res.object)
            })
        },
        getFindProfitBountyDetailByTimeAndPayType() {
            findProfitBountyDetailByTimeAndPayType({
                timeStart: this.start,
                timeEnd: this.end,
                currentPage: this.pageNum,
                payType: this.item.payType
            }).then(res => {
                if (res.object.length < 10) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.pageNum++
                    this.loading = false
                    this.finished = false
                }
                this.jyList = this.jyList.concat(res.object)
            })
        },
        getFindProfitManageDetailByTimeAndPayType() {
            findProfitManageDetailByTimeAndPayType({
                timeStart: this.start,
                timeEnd: this.end,
                currentPage: this.pageNum,
                payType: this.item.payType
            }).then(res => {
                if (res.object.length < 10) {
                    this.loading = false
                    this.finished = true
                } else {
                    this.pageNum++
                    this.loading = false
                    this.finished = false
                }
                this.jyList = this.jyList.concat(res.object)
            })
        },
        getPayType(e) {
            let type
            if (this.active == 0) {
                type = 'TRANS'
            }
            if (this.active == 1) {
                type = 'ACT'
            }
            if (this.active == 2) {
                type = 'BOUNTY'
            }
            // if (this.active == 3) {
            //     type = 'MANAGE'
            // }
            payType({
                type
            }).then(res => {
                res.object.forEach(item => {
                    item.name = item.payTypeName
                })
                this.actions = [{ payType: '', payTypeName: '全部', name: '全部' }, ...res.object]
                this.show = true
            })
        }
    }
}
</script>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .topWrapper {
        position: relative;
        font-size: 0;
        padding: 10px;
        box-sizing: border-box;

        .bg {
            width: 100%;
        }
        .content {
            position: absolute;
            top: 25px;
            left: 0;
            height: 100%;
            width: 100%;
            padding: 16px;
            box-sizing: border-box;
            color: #ffffff;
            line-height: 35px;
            .top {
                font-size: 16px;
            }
            .center {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                span {
                    font-size: 26px;
                }
            }
            .bottom {
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                .left {
                    flex: 1;
                    border: 1px solid #ffffff;
                    opacity: 1;
                    color: #ffffff;
                    height: 24px;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .btn {
                    width: 130px;
                    height: 24px;
                    border: 1px solid #ffffff;
                    opacity: 1;
                    color: #ffffff;
                    margin-left: 10px;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        width: 20px;
                    }
                }
            }
        }
    }
    .bottomWrapper {
        flex: 1;
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        .cc {
            flex: 1;
            padding: 10px;
            overflow: scroll;
            background-color: #ffffff;
        }
        .list {
            border-radius: 11px;
            overflow: hidden;
            margin-top: 10px;
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: white;
                padding: 10px;
                border-top: 1px solid #f5f5f5;
                .left {
                    line-height: 20px;
                    .top {
                        font-size: 13px;
                        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #545454;
                    }
                    .bottom {
                        font-size: 11px;
                        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #9a9a9a;
                    }
                }
                .right {
                    span {
                        font-size: 13px;
                        margin-right: 10px;
                        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #f8ad00;
                    }
                    .img {
                        height: 10px;
                        width: 10px;
                    }
                }
            }
            .item:nth-child(1) {
                border: none;
            }
        }
    }
}
</style>
<style lang="scss">
.van-tab {
    font-size: 12px;
}
table {
    span-align: center;
    margin-top: 10px;
    tr {
        border-bottom: 1px solid rgb(245, 245, 245);
    }
    td,
    th {
        height: 30px;
        width: 25%;
    }
}
</style>
